<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2024-11-05 18:38:04
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-05 18:39:00
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景图片</title>
  <style>
    body{
      /* 清除默认布局 */
      margin: 0;
    }
    #app{
      width: calc(100vw - 20px);
      height: calc(100vh - 20px);
      /* height: calc(100 - 20px); */
      border: 10px solid red;
      /* 设置背景图片 */
      background-image: url("./img/bgImg.png");
      /* 设置重复 */
      /* 默认 水平垂直重复 */
      /* background-repeat: repeat; */
      /* background-repeat: repeat-x;
      background-repeat: repeat-y; */
      background-repeat: no-repeat;
      /* 设置背景图片的位置 */
      background-position: 50% 50% ;
      background-position: 50px 50px ;
      background-position: center ;
      /* 设置背景图片大小 */
      background-size: contain;
      /* background: url("./img/bgImg.png") repeat-y center; */
      border: 10px solid red;
      border-width: 10px;
      border-style: dotted;
      border-top: 10px solid;
      border-right: 10px dashed;
      border-bottom: 10px double;
      border-left: 10px dotted;
      border-color: red;
      /* 上右下左 */
      border-color: red blue green orange;
      
    }
  </style>
</head>
<body>
  <div id="app">

  </div>
</body>
</html>